<template>
  <div class="publish-wrap">
    <el-form class="form">
      <el-form-item label-width="100px" label="姓名：">
        <el-input :model="name" type="text"/>
      </el-form-item>
      <el-form-item label-width="120px" label="手机号：">
        <el-input :model="phone" type="text"/>
      </el-form-item>
      <el-form-item label-width="100px" label="状态：">
        <el-select v-model="statesValue" placeholder="请选择">
          <el-option
            v-for="item in states"
            :key="item.value"
            :label="item.label"
            :value="item.label"/>
        </el-select>
      </el-form-item>
      <el-form-item label-width="100px" label="审核时间：">
        <el-date-picker
          v-model="pickDate"
          :picker-options="pickerOptions2"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="left"/>
      </el-form-item>
      <el-form-item label-width="50px">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" :summary-method="getSummaries" show-summary style="width: 100%" border>
      <el-table-column prop="index" label="序号" width="180"/>
      <el-table-column prop="name" label="姓名" width="200"/>
      <el-table-column prop="phone" label="手机号" width="200"/>
      <el-table-column prop="amount" label="提现金额" width="200"/>
      <el-table-column prop="applyDate" label="申请时间" width="200"/>
      <el-table-column prop="auditDate" sortable label="审核时间" width="200"/>
      <el-table-column prop="orderNum" label="交易单号" width="200"/>
      <el-table-column prop="leading" label="状态" width="220">
        <template slot-scope="scope">
          <el-tag :type="scope.row.leading ? 'success' : 'danger'">{{ scope.row.leading ? '成功': '失败' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="marker" label="备注" min-width="200"/>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'Publish',
  components: {
    Pagination
  },
  data() {
    return {
      name: '',
      phone: '',
      statesValue: '全部',
      states: [
        {
          value: '选项一',
          label: '全部'
        },
        {
          value: '选项二',
          label: '成功'
        },
        {
          value: '选项三',
          label: '失败'
        }
      ],
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      pickDate: '',
      tableData: [
        {
          index: 1,
          name: '陕西拒信科技有限公司',
          phone: '15291914588',
          amount: 2000,
          applyDate: '2018-01-07',
          auditDate: '2018-01-06',
          orderNum: '055525985',
          leading: true
        },
        {
          index: 2,
          name: '陕西拒信科技有限公司',
          phone: '15291914588',
          amount: 2000,
          applyDate: '2018-01-07',
          auditDate: '2018-01-06',
          orderNum: '055525985',
          leading: true
        }
      ],
      total: 10,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      }
    }
  },
  methods: {
    handleDelete(scope) {
      this.centerDialogVisible = true
    },
    getList() {
      console.log(1)
    },
    getSummaries(params) {
      const sums = []
      const SUM = {
        index: 0,
        text: '提现总额',
        amount: 'amount'
      }
      const { columns } = params
      columns.map((item, index) => {
        if (index === SUM.index) {
          sums[index] = SUM.text
        }
        if (item.property === SUM.amount) {
          sums[index] = 2000
        }
        sums.push('')
      })
      return sums
    }
  }
}
</script>
<style lang="scss" scoped>
.publish-wrap {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .form {
    display: flex;
    flex-wrap: wrap;
  }
  .switch-btn {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
  }
}
</style>
